<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="字典名称：">
        <el-input v-model="formInline.name" placeholder clearable></el-input>
      </el-form-item>
      <el-form-item label="字典编码：">
        <el-input v-model="formInline.code" placeholder clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增字典</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      @selection-change="selectionChangeHandle"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
      <el-table-column prop="name" label="字典名称" header-align="center"></el-table-column>
      <el-table-column prop="code" label="字典编码" header-align="center"></el-table-column>

      <el-table-column label="操作" width="350" align="left" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="mini">编辑</el-button>
          <el-button @click="queryValue(scope.row.code)" type="text" size="mini">字典值</el-button>
          <el-button @click="addparamValue(scope.row.code)" type="text" size="mini">添加字典</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="!dataForm.uuid ? '新增' : '修改'" :visible.sync="dialogVisible" width="30%">
      <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="80px">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>

        <el-form-item label="字典编码" prop="code">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="dataForm.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <!--字典配置详细弹窗-->
    <el-dialog title="字典配置详细" :visible.sync="dialogparamDetailVisible" width="80%">
      <el-table
        :data="paramData"
        stripe
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column property="uuid" label="编号" sortable width align="left" v-if="false"></el-table-column>
        <el-table-column property="value" label="名称" sortable width align="left"></el-table-column>
        <el-table-column property="code" label="字典值" sortable width align="right"></el-table-column>

        <el-table-column label="操作" width="350" align="left" header-align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="editparamValue(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="deleteparamValue(scope.row)" type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <div class="block" style="margin-top:10px">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15, 20]"
                    :current-page="listQuery.current"
                    :page-size="listQuery.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
      </div>-->
    </el-dialog>

    <el-dialog
      :title="!valueForm.uuid ? '新增' : '修改'"
      :visible.sync="dialogvalueVisible"
      width="30%"
    >
      <el-form :model="valueForm" :rules="rules" ref="valueForm" label-width="80px">
        <el-form-item label="字典名称" prop="value">
          <el-input v-model="valueForm.value"></el-input>
        </el-form-item>

        <el-form-item label="字典编码" prop="code">
          <el-input v-model="valueForm.code"></el-input>
        </el-form-item>
        <el-form-item label="父级Id" prop="dictId" style="display:none">
          <el-input v-model="valueForm.dictId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogvalueVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdittwo()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  querycode,
  querycodeByName,
  saveCode,
  deleteCode,
  deleteCodeChild,
  updateCode,
  savecodeclid,
  updateCodeChild
} from "@/api/dictionary";
import qs from "qs";
export default {
  data() {
    return {
      data: [],
      loading: true,
      dialogVisibleorg: false,
      dialogparamDetailVisible: false,
      dataListSelections: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 10
      },
      tableData: [],
      dataForm: {
        uuid: "",
        name: "",
        code: "",
        value: 1,
        status: "1"
      },
      valueForm: {
        uuid: "",
        dictId: "",
        value: "",
        code: "",
        status: "1"
      },
      dialogVisibleone: false,
      dialogVisible: false,
      dialogvalueVisible: false,
      formInline: {
        name: "",
        code: ""
      },
      paramData: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请选择分类",
            trigger: "blur"
          }
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    kong() {
      this.formInline.name = "";
      this.formInline.code = "";
    },

    add() {
      this.dataForm.uuid = "";
      this.dataForm.name = "";
      this.dataForm.code = "";
      this.dataForm.value = "";
      this.dataForm.status = "1";
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.dataForm.uuid = v.uuid;
      this.dataForm.name = v.name;
      this.dataForm.code = String(v.code);
      this.dataForm.value = v.value;
      this.dataForm.status = String(v.status);
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
      let data = {
        dictId: v.uuid
      };
      querycodeByName(data).then(res => {
        this.paramData = res.records;
      });
    },
    /*字典配置*/
    queryValue(v) {
      let data = {
        size: 99, //this.listQuery.size,
        current: 1, //this.listQuery.current,
        condition: {
          code: this.formInline.code,
          value: this.formInline.name,
          dictId: v
        }
      };
      querycodeByName(data).then(res => {
        (this.dialogparamDetailVisible = true), (this.paramData = res.records);
      });
    },
    confirmEdit(v) {
      if (this.dataForm.name == "" || this.dataForm.name == null) {
        this.$message.error("请输入名称");
        return;
      }
      if (this.dataForm.code == "" || this.dataForm.code == null) {
        this.$message.error("请输入编码");
        return;
      }
      if (this.editflag) {
        var userId = localStorage.getItem("userId");
        let data = {
          name: this.dataForm.name,
          code: this.dataForm.code,
          value: this.dataForm.value
        };
        saveCode(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.getDataList();
        });
      } else {
        var userId = localStorage.getItem("userId");
        let data = {
          uuid: this.dataForm.uuid,
          name: this.dataForm.name,
          code: this.dataForm.code,
          value: this.dataForm.value,
          status: this.dataForm.status
        };
        updateCode(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.getDataList();
        });
      }
    },
    editparamValue(v) {
      this.valueForm.uuid = v.uuid;
      this.valueForm.value = v.value;
      this.valueForm.code = String(v.code);
      this.valueForm.dictId = v.dictId;
      this.dataForm.status = String(v.status);
      this.dialogvalueVisible = !this.dialogvalueVisible;
      this.editvalueflag = false;
    },
    confirmEdittwo(v) {
      if (this.valueForm.value == "" || this.valueForm.value == null) {
        this.$message.error("请输入名称");
        return;
      }
      if (this.valueForm.code == "" || this.valueForm.code == null) {
        this.$message.error("请输入编码");
        return;
      }

      if (this.editvalueflag) {
        var userId = localStorage.getItem("userId");
        let data = {
          value: this.valueForm.value,
          code: this.valueForm.code,
          dictId: this.valueForm.dictId,
          status: "1"
        };
        savecodeclid(data).then(res => {
          this.dialogvalueVisible = !this.dialogvalueVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
        });
      } else {
        let data = {
          uuid: this.valueForm.uuid,
          value: this.valueForm.value,
          code: this.valueForm.code,
          dictId: this.valueForm.dictId,
          status: this.valueForm.status
        };
        updateCodeChild(data).then(res => {
          this.dialogvalueVisible = !this.dialogvalueVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.queryValue(this.valueForm.dictId);
        });
      }
    },

    handleClick(v) {
      let data = { uuid: v.uuid };
      deleteCode(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.getDataList();
      });
    },
    deleteparamValue(v) {
      let data = { uuid: v.uuid };
      deleteCodeChild(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.queryValue(v.dictId);
      });
    },
    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          name: this.formInline.name,
          code: this.formInline.code
        }
      };
      querycode(data).then(res => {
        (this.loading = false),
          (this.tableData = res.records),
          (this.total = res.total);
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this.getDataList();
    },

    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 添加字典
    addparamValue(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      let data = {
        dictId: ids[0]
      };
      this.valueForm.uuid = "";
      this.valueForm.value = "";
      this.valueForm.code = "";
      this.valueForm.status = "1";
      this.valueForm.dictId = data.dictId;
      this.dialogvalueVisible = !this.dialogvalueVisible;
      this.editvalueflag = true;
    }
  }
};
</script>
<style  lang="less" scoped>
.demo-form-inline {
  border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}
</style>
